<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>动态添加文件上传列表</title>
    <link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet">
    <script th:src="@{/login/js/jquery.min.js}"></script>
</head>

<body>
<div th:if="${uploadStatus}" style="color: green;" th:text="${uploadStatus}">上传成功</div>
<form th:action="@{/uploadFile}" method="post" enctype="multipart/form-data">
    上传文件：<input type="button" value="添加文件" onclick="add()"/>
    <div id="file" style="margin: 10px 0;"></div>
    <input id="submit" type="submit" value="上传" style="display: none;"/>
</form>

<script type="text/javascript">
    // 动态添加上传按钮
    function add() {
        var innerdiv = "<div>";
        innerdiv += '<input type="file" name="fileUpload" multiple required="required">';
        innerdiv += '<input type="button" value="删除" onclick="remove(this)">';
        innerdiv += '</div>';
        $("#file").append(innerdiv);
        // 显示提交按钮
        $("#submit").css("display", "block");
    }

    // 删除当前行
    function remove(obj) {
        $(obj).parent().remove();
        if ($("#file div").length === 0) {
            $("#submit").css("display", "none");
        }
    }

    // 提交表单前，合并所有文件输入框中的文件
    $("form").submit(function() {
        var allFiles = [];
        var fileInputs = $("#file input[type='file']");
        fileInputs.each(function() {
            var files = this.files;
            for (var i = 0; i < files.length; i++) {
                allFiles.push(files[i]);
            }
        });

        // 创建一个新的 FormData 对象
        var formData = new FormData(this);
        // 清空原有的文件字段
        formData.delete('fileUpload');

        // 将合并后的文件添加到 FormData 中
        for (var i = 0; i < allFiles.length; i++) {
            formData.append('fileUpload', allFiles[i]);
        }

        // 用新的 FormData 替换原有的表单数据
        $(this)[0].dataTransfer = formData;

        return true;
    });
</script>
</body>
</html>